<template>
    <div>
        <head-top></head-top>
        <el-row style="margin-top: 20px;">
  			<el-col :span="12" :offset="4">
		        <el-form :model="formData"  ref="formData" label-width="110px" class="demo-formData">
					<el-form-item label="请输入原密码:" prop="pwd">
						<el-input v-model="formData.pwd" type="password"></el-input>
					</el-form-item>
					<el-form-item label="请输入新密码:" prop="newPwd">
						<el-input v-model="formData.newPwd" type="password"></el-input>
					</el-form-item>
                    <el-form-item label="请确认新密码:" prop="newPwd2">
                    	<el-input v-model="formData.newPwd2" type="password"></el-input>
                    </el-form-item>
					<el-form-item class="button_submit">
						<el-button type="primary" @click="submitForm('formData')">修改密码</el-button>
					</el-form-item>
				</el-form>
  			</el-col>
  		</el-row>
    </div>
</template>

<script>
    import {mapState} from 'vuex'
    import headTop from '@/components/headTop'
    import {updatepwd} from '@/api/getData'
    import {baseUrl, baseImgPath} from '@/config/env'
    export default {
    	data(){
    		return {
    			formData: {
					pwd:'',
                    newPwd:'',
                    newPwd2:''
		        }
    		}
    	},
       computed: {

       	...mapState(['adminInfo']),

       },
    	components: {
    		headTop,
    	},
    	methods: {
		    submitForm(formName) {
                if(this.formData.pwd!=this.adminInfo.user.userpassword){
                    this.$message({
                    	type: 'error',
                    	message: '密码错误,请重新输入'
                    });
                     return false;
                }
                if(this.formData.newPwd==''){
                   this.$message({
                   	type: 'info',
                   	message: '密码不能为空,请重新输入'
                   });
                    return false;
                }
                if(this.formData.newPwd!=this.formData.newPwd2){
                   this.$message({
                   	type: 'info',
                   	message: '两次密码不一致,请重新输入'
                   });
                    return false;
                }
				this.$refs[formName].validate(async (valid) => {
					if (valid) {
						try{
							let result = await updatepwd(this.adminInfo.user.id,this.formData.newPwd);
							if (result.status == 1) {
								this.$message({
					            	type: 'success',
					            	message: result.message
					          	});
                                this.$router.push('/');
							}else{
								this.$message({
					            	type: 'error',
					            	message: result.message
					          	});
							}
							console.log(result)
						}catch(err){
							console.log(err)
						}
					} else {
						this.$notify.error({
							title: '错误',
							message: '请检查输入是否正确',
							offset: 100
						});
						return false;
					}
				});
			},
		}
    }
</script>

<style lang="less">
	@import '../style/mixin';
	.button_submit{
		text-align: center;
	}
	.avatar-uploader .el-upload {
	    border: 1px dashed #d9d9d9;
	    border-radius: 6px;
	    cursor: pointer;
	    position: relative;
	    overflow: hidden;
	}
	.avatar-uploader .el-upload:hover {
	    border-color: #20a0ff;
	}
	.avatar-uploader-icon {
	    font-size: 28px;
	    color: #8c939d;
	    width: 120px;
	    height: 120px;
	    line-height: 120px;
	    text-align: center;
	}
	.avatar {
	    width: 120px;
	    height: 120px;
	    display: block;
	}
	.el-table .info-row {
	    background: #c9e5f5;
	}

	.el-table .positive-row {
	    background: #e2f0e4;
	}
</style>
